<template>
  <header class="header">
  	<div class="logo">
  		<div class="box">
  			<b class="icon"></b>
        <label class="title" @dblclick="iptShow = true">
          <slot name="title"></slot>
        </label>
        <div class="ipt" v-show="iptShow">
          <slot name="ipt"></slot>
          <b class="ok" @click="iptShow = false"></b>
        </div>
  		</div>
  	</div>
  	<div class="linetool" :title="lang.line">
  		<div class="tool">
        <slot name="lineType"></slot>
  		</div>
  	</div>
  	<span class="separate"></span>
  	<div class="btn">
      <div v-for="btn in buttons" :title="lang[btn.key]" :key="btn.key">
        <b :class="btn.icon" @click="click(btn.fn)"></b>
      </div>
  	</div>
  	<span class="separate"></span>
  </header>
</template>

<script>
  import language from './js/lang/smtflow.i18n.zh-cn'
  export default {
    name: 'FlowHeader',
    props: [
      'onClickOpen',
      'onClickSave'
    ],
    data() {
      return {
        iptShow: false,
        buttons: [
          {key: 'new', icon: 'ico_new', fn: 'clickNew', impl: true},
          {key: 'open', icon: 'ico_open', fn: 'clickOpen', impl: true},
          {key: 'save', icon: 'ico_save', fn: 'clickSave', impl: true}
        ],
        lang: language.btn
      }
    },    
    methods: {
      click(type) {
        this[type]()
      },
      clickNew() {
        if(confirm(language.msg.confirmResestWorkspace)) {
          this.$flow.$emit('resetWorkarea');
        }
      },
      clickOpen() {
        this.onClickOpen ? this.onClickOpen() : null;
      },
      clickSave() {
        this.$flow.$emit('getFlowData', (data) => {
          this.onClickSave ? this.onClickSave(JSON.stringify(data)) : null;
        });
      }
    },
    mounted() {
      window.addEventListener('mousedown', () => {
        if(this.iptShow) this.iptShow = false;
      });
    }
  }
</script>

<style scoped>
  header.header {
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 4px;
  }
  div.logo {
    border: #b7c8d7 1px solid;
    border-radius: 3px;
    margin: 0 4px 0 5px;
    height: 38px;
  }
  div.logo > div.box {
    height: 38px;
    border: #e9f4fa 1px solid;
    border-radius: 3px;	
    position: relative;
  }
  div.logo > div.box > b.icon {
    width: 40px;
    height: 40px;
    background:url(./css/img/logo.svg) no-repeat;
    background-size: 40px 40px;
    position: absolute;
    top: 0px;
    left: 10px;
	  transform:rotateY(180deg);
  }
  div.logo > div.box > label.title {
    display: inline-block;
    line-height:38px;
    height: 38px;
    width: 350px;
    padding: 0 8px;
    margin-left: 60px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
  }
  div.logo > div.box > label.title:hover {
    cursor: pointer;
  }
  div.logo > div.box > div.ipt {
    position: absolute;
    left: 68px;
    top: 4px;
    width: 350px;
  }
  div.logo > div.box > div.ipt > input {
    outline: none;
    text-align: center;
    height: 30px;
    width: 100%;
    font-weight: bold;
    box-sizing: border-box;
  }
  div.logo > div.box > div.ipt > b.ok {
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    display: inline-block;
    border: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-image:url(./css/img/icon-ok.svg);
    position: absolute;
    right: 3px;
    top: 3px;
  }
  div.logo > div.box > div.ipt > b.ok:hover {
    background-color: #e3ea8f;
    cursor: pointer;
  }
  span.separate {
    height: 30px;
    width: 0;
    border-left: #9ac6ff 1px solid;
    border-right: #fff 1px solid;
    display: inline-block;
    position: relative;
    margin: 0 3px;
    top: 1px;
  }

  div.linetool,
  div.btn {
    display: inline-block;
    position: relative;
    top: 3px;
  } 
  div.linetool > div.tool,
  div.btn > div {
    display: inline-block;
    width: 34px;
    height: 34px;
    border: 1px #d2e1f0 solid;
    box-sizing: border-box;
    margin: 0 2px;
  }
  div.linetool > div b,
  div.btn > div > b {
    width: 32px;
    height: 32px;
    background-size: 30px 30px;
  }    
  div.linetool > div.tool,
  div.btn > div:hover {
    border-radius: 2px;
    cursor: pointer;
    border: #8b7654 1px solid;
    background-color: #e3ea8f;
  }
  div.btn > div > b,
  div.linetool > div b {
    display: inline-block;
    border: 0;
    background-repeat: no-repeat;
    background-position: center;
  }    
  /*---------------- btn ----------------*/
  div.linetool > div b.ico_line{background-image:url(./css/img/btn-line.svg);}
  div.linetool > div b.ico_polyline{background-image:url(./css/img/btn-polyline.svg);}
  div.btn > div > b.ico_new{background-image:url(./css/img/btn-new.svg);}
  div.btn > div > b.ico_open{background-image:url(./css/img/btn-open.svg);}
  div.btn > div > b.ico_save{background-image:url(./css/img/btn-save.svg);}
  div.btn > div > b.ico_undo{background-image:url(./css/img/btn-undo.svg);background-size: 28px 28px;}
  div.btn > div > b.ico_redo{background-image:url(./css/img/btn-redo.svg);background-size: 28px 28px;}
  div.btn > div > b.ico_download{background-image:url(./css/img/btn-download.svg);}
</style>
